import React from 'react'
/**
 * 一、如何定义类
 * 1、ES6类的语法
 * class 类名{
 *   
 * }
 * 说明:
 * 1)class是关键字
 * 2)类名的定义规范，如下
 * - 类名是由字母、数字、下划线或者美元符号组成
 * - 类名的第一个字母不能是数字
 * - 类名中间不能有空格
 * - 类名是关键字或者保留字
 * - 类名符合驼峰式命名法的，每个单词的首字母大写
 * 2、给类添加属性和方法
 *   属性表示的是对象的特征，方法是表示对象的行为
 *  class 类名{
 *    属性1=初始值;
 *    属性2=初始值;
 *    方法名(){}
 *  }
 *  特别注意：类中的方法不能带function
 *  类中的方法如果要方法类中的属性，需要使用this来进行修饰
 * 3、实例化对象
 * 语法:let/const 对象名=new 类名()
 * 4、给对象赋初始值
 * 语法:对象名.属性名=值
 * 5、调用对象中的方法
 * 语法:对象名.方法名()
 * 二、构造函数
 * 1、作用：构造函数是用来进行初始化的，构造函数调用是需要通过new调用
 * class 类名{
 *   constructor(形参1，参数2，形参3,....,形参n){
 *     this.成员属性=形参1
 *     this.成员属性=形参2
 *     this.成员属性=形参3
 *     ....
 *     this.成员属性n=形参n
 *   }
 * }
 * 
 */
export default function App() {
  //实例化对象
  const dog1=new Dog()
  dog1.nickName="旺财"
  dog1.age=3
  dog1.color="黑色"

  const dog2=new Dog()
  dog2.nickName="小白"
  dog2.age=2
  dog2.color="白色"
  const dogList=[];
  dogList.push(dog1)
  dogList.push(dog2)

  console.log('-------------------------------------------');

  const c1=new Car('陕A88888881',"比亚迪F4","白色","10万");
  const c2=new Car('陕A88888882',"奔驰","绿色","50万");
  const c3=new Car('陕A88888883',"宝马","蓝色","40万");
  const c4=new Car('陕A88888884',"吉利","咖啡色","8万");
  const carList=[]
  carList.push(c1)
  carList.push(c2)
  carList.push(c3)
  carList.push(c4)
  return (
    <div>
        <ul>
           {
            dogList.length>0&&dogList.map((item,index)=><li key={index}>
                {item.show()}
            </li>)
           }
        </ul>

        <hr />

        <ul>
            {
                carList.length>0&&carList.map(item=><li key={item.no}>
                    {item.show()}
                </li>)
            }
        </ul>

    </div>
  )
}

class Dog{
    nickName;
    age;
    color;
    show(){
       return `昵称:${this.nickName}\n 年龄:${this.age}\n 颜色:${this.color}` 
    }
}

class ToTask{
    taskName;
    status;
    taskRender(){
        return <div style={{width:'200px',height:'50px',border:'1px soild #ccc'}}>{this.taskName}</div>
    }
}

class Car{
   no;
   name;
   color;
   price;
   constructor(no,name,color,price){
     this.no=no;
     this.name=name;
     this.price=price;
     this.color=color;
   }
   show(){
    return `${this.no}|${this.name}|${this.price}|${this.color}`
   }
}
